<template>
  <div class="canvas">
    <canvas :id="id" width="160" height="160"></canvas>
  </div>
</template>

<script>
  export default {
    name: 'canvas1',
    data () {
      return {

      }
    },
    props: ['precent', 'id'],
    watch: {
      precent () {
        this.draw()
      }
    },
    methods: {
      drawPrairie (cxt) {
        cxt.save()
      },
      draw () {
        let canvas = document.getElementById(this.id)
        let ctx = canvas.getContext('2d')
        ctx.beginPath()
        ctx.lineWidth = '4'
        ctx.moveTo(75, 40)
        ctx.bezierCurveTo(75, 37, 70, 25, 50, 25)
        ctx.bezierCurveTo(20, 25, 22, 66, 22, 55)
        ctx.bezierCurveTo(20, 80, 40, 102, 75, 120)
        ctx.bezierCurveTo(110, 102, 130, 80, 128, 55)
        ctx.bezierCurveTo(128, 55, 130, 25, 100, 25)
        ctx.bezierCurveTo(85, 25, 75, 37, 75, 40)
        ctx.strokeStyle = '#ed7b7b'
//        var gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, 150)
//        gradient.addColorStop(0, 'rgba(244,28,285,1)')
//        gradient.addColorStop(1, 'rgba(255,255,255,1)')
//        ctx.fillStyle = gradient
        ctx.stroke()
        ctx.closePath()
        // 绘制文字
        ctx.beginPath()
        ctx.font = '20px Courier New'
        ctx.fillStyle = '#ed7b7b'
        ctx.fillText('重 点', 50, 65)
        ctx.closePath()
        // 绘制文字
        ctx.beginPath()
        ctx.font = '20px Courier New'
        ctx.fillStyle = '#ed7b7b'
        ctx.fillText('关 注', 50, 90)
        ctx.closePath()
//        ctx.beginPath()
//        ctx.moveTo(0, 100)
//        ctx.bezierCurveTo(25, 30, 35, 55, 80, 40)
//        ctx.lineTo(80, 60)
//        ctx.lineTo(0, 60)
//        ctx.closePath()
//        let lineStyle = ctx.createLinearGradient(0, 600, 600, 0)
//        lineStyle.addColorStop(0, '#00AA58')
//        lineStyle.addColorStop(0.3, '#63AA7B')
//        lineStyle.addColorStop(1, '#04AA00')
//        ctx.fillStyle = lineStyle
//        ctx.fill()
//        ctx.restore()
//        ctx.closePath()
      }
    },
    mounted () {
      this.draw()
    }
  }
</script>

<style lang="stylus" scoped>
  .canvas
    width 170px
    height 160px
    float left
</style>
